<template>
  <div class="common-tabs-wrapper">
    <el-tabs v-model="active" type="card" @tab-click="changeTab">
      <el-tab-pane
        v-for="(item, index) in gxOption1"
        :label="item.key_name"
        :name="item.key_value"
        :key="index"
      >
        <component
          :ref="'pane' + item.key_value"
          :is="item.component"
        ></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Xisha from './modules/Xisha.vue';
import Qianfang from './modules/Qianfang.vue';
import Luotong from './modules/Luotong.vue';
export default {
  components: { Xisha, Qianfang, Luotong },
  data() {
    return {
      active: '2',
      gxOption1: [
        { key_value: '1', key_name: '前纺', component: 'Qianfang' },
        { key_value: '2', key_name: '细纱', component: 'Xisha' },
        { key_value: '3', key_name: '络筒', component: 'Luotong' }
      ]
    };
  },
  created() {
    this.$store.dispatch('common/getDict', {
      dict: 'floor',
      name: 'fr'
    });
  },
  methods: {
    changeTab(vue) {
      vue.$children[0].getData();
    }
  }
};
</script>

<style lang="scss">
.common-tabs-wrapper {
  .full-calendar-header {
    top: 0;
    left: 0;
    .header-center {
      text-align: center;
      .title {
        margin: 0 15px;
        color: #252f41;
        font-size: 14px;
        font-weight: 500;
      }
      .prev-month,
      .next-month,
      .current-month {
        display: inline-block;
        width: 32px;
        height: 32px;
        color: #606d86;
        line-height: 32px;
        font-size: 14px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #cfd4d8;
        cursor: pointer;
      }
      .current-month {
        width: 52px;
        font-size: 12px;
        color: #606d86;
        margin-left: 10px;
      }
    }
  }
}
</style>
